<template>
	<div>
		<div class="card-Box">
			    <el-form :inline="true" :model="dataForm" ref="dataForm" @keyup.enter.native="getDataList()">
			      <el-form-item label="站点名称">
			         <el-input v-model="dataForm.stationName" placeholder="站点名称" clearable></el-input>
			      </el-form-item>
			      <el-form-item label="所属线路">
			       <el-select v-model="dataForm.lineId" placeholder="请选择" clearable>
			         <el-option v-for="item in options1" :key="item.lineId" :label="item.lineName" :value="item.lineId"></el-option>
			       </el-select>
			      </el-form-item>
			      <el-form-item>
			        <el-button @click="getDataList()" type="primary" class="search">搜索</el-button>
			      </el-form-item>
			      <el-form-item>
			        <el-button type="info" class="reset" @click="resetForm()">重置</el-button>
			      </el-form-item>
			    </el-form>
			</div>
			<div class="aui-card--fill">
				<div class="mod-sys__role ">
					<div class="userBox">
						<div class="userListText">信息列表</div>
						<el-button class="newAdd" v-if="$hasPermission('sys:user:save')" type="primary"
							@click="addOrUpdateHandle()">新增</el-button>
					</div>
					<el-table v-loading="dataListLoading" :data="dataList" border
						@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
						style="width: 100%;">
						<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
						<el-table-column type="index" label="序号" header-align="center" align="center" width="50">
						</el-table-column>
						<el-table-column prop="stationName" label="站点名称" header-align="center" align="center"></el-table-column>
						<el-table-column prop="lineName" label="所属线路" header-align="center" align="center">
<!-- 							<template slot-scope="scope">
								<span>{{!scope.row.stationLineDTOS?'':stationLineDTOS|dynamicTreeText(options1)}}</span>
						    </template> -->
						</el-table-column>
						<el-table-column prop="createDate" label="登记日期"  header-align="center" align="center"
							width="180"></el-table-column>
						<el-table-column prop="sysUserName" label="登记人" header-align="center" align="center"></el-table-column>
						<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="300">
							<template slot-scope="scope">
								<el-button type="success" round size="mini" @click="addOrUpdateHandle(scope.row.stationId,true)">查看
								</el-button>
								<el-button type="primary" round size="mini" @click="addOrUpdateHandle(scope.row.stationId,false)">
									{{ $t('update') }}</el-button>
								<el-button type="danger" round size="mini" @click="deleteHandle(scope.row.stationId)">
									{{ $t('delete') }}</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination background :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
						layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
						@current-change="pageCurrentChangeHandle">
					</el-pagination>
					<!-- 弹窗, 新增 / 修改 -->
					<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
				</div>
			</div>
		
	</div>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import AddOrUpdate from './station-add-or-update'
	export default {
		mixins: [mixinViewModule],
		data() {
			return {
				mixinViewModuleOptions: {
					getDataListURL: '/psc/station/page',
					getDataListIsPage: true,
					activatedIsNeed: true,
					deleteURL: '/psc/station',
					deleteIsBatch: true
				},
				dataForm: {
					stationName: '',
					line:''
				},
				options1:[],
			}
		},
		components: {
			AddOrUpdate
		},
		mounted() {
		    this.getline()	
		},
		activated(){
			this.getline()
		},
		methods: {
			// 获取线路信息
			getline() {
				this.$http.get(`/psc/line/list`).then(res => {
					this.options1 = res.data.data
				})
			},
			resetForm(){
				this.dataForm.stationName = '',
				this.dataForm.lineId = ''
				this.$http.get('/psc/station/page').then((res) => {
					this.dataList = res.data.data.list
				})
				
			},
		}
	}
</script>

<style scoped>
	.card-Box {
		width: 100%;
		height: 7.6vh;
		line-height: 7.6vh;
		padding: 0 1.8vw;
		background-color: #fff;
		border-radius: 10px;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	.card-Box>>>.el-form--inline .el-form-item__content,.el-form--inline .el-form-item{
		vertical-align: middle!important;
	}
	.card-Box>>> .el-form-item{
		margin-bottom: 0;
	}

	.aui-card--fill {
		width: 100%;
		/* height: 750px; */
		padding: 1.8vh 2vw 1.8vh 2vw;
		background-color: #fff;
		border-radius: 10px;
	}

	.selectRegion {
		width: 100%;
		height: 10vh;
	}

	/* .mod-sys__user{
    position: relative;
  } */
	.search {
		/* margin-left: 6.25vw; */
		/* width: 5.9vw;
		height: 3.8vh; */
	}

	.reset {
		/* width: 5.9vw;
		height: 3.8vh; */
		/* margin-left: 1.875vw; */
		background-color: rgba(180, 196, 209, 1);
		border: 1px solid rgba(180, 196, 209, 1);
	}

	.userBox {
		display: flex;
		position: relative;
		width: 100%;
		height: 3vh;
		margin-bottom: 1.9vh;
	}

	.userListText {
		/* width: 5vw; */
		height: 3vh;
		line-height: 3vh;
		font-size: 16px;
	}

	.newAdd {
		position: absolute;
		right: 0;
		width: 5.9vw;
		height: 3vh;
		padding: 0;
	}

	.aui-card--fill>>>.el-table__fixed-right {
		height: 100% !important;
	}
</style>
